<template>
  <div id="ems">
  	<mt-header fixed title="快递查询">
		  <router-link to="/" slot="left">
		    <mt-button icon="back">返回</mt-button>
		  </router-link>
		  
		</mt-header>
     
    <mt-cell title="选择快递公司">
      <select  id="company" v-model="selected" >
        <option value="">--请选择--</option>
       <option :value="item.value" v-for="(item,i) in ems" :key="i">{{item.key}}</option>
     </select>
       
    </mt-cell>
    <mt-field label="快递单号" placeholder="请输入快递单号" v-model="order">
    	<span @click="handleQRCode">[+]</span>
    </mt-field>
    <div style="text-align:right;margin:10px">
      <mt-button size="small" type="primary" @click="submit">提交</mt-button> 
    </div>
    <div v-if="emsData.length>0">
      <ul class="emsData">
        <li v-for="item in emsData">
          <p class="item">{{item.time}}</p>
          <p class="context">{{item.context}}</p>
          
        </li>
      </ul>
    </div>
     
  </div>
</template>

<script>
import { Toast} from 'mint-ui';
import axios from "@/http/api";
export default {
  name: 'ems',
  data () {
    return {
       ems:[
         {key:"申通",value:"shentong"},
         {key:"EMS",value:"ems"},
         {key:"顺丰",value:"shunfeng"},
         {key:"圆通",value:"yuantong"},
         {key:"中通",value:"zhongtong"},
         {key:"韵达",value:"yunda"},
         {key:"天天",value:"tiantian"},
         {key:"汇通",value:"huitongkuaidi"},
         {key:"全峰",value:"quanfengkuaidi"},
         {key:"德邦",value:"debangwuliu"},
         {key:"宅急送",value:"zhaijisong"},
       ],
       order:null,
       selected:"",
       emsData:[]
    }
  },
 
  created(){
  },
  methods: {
    
    handleQRCode(){
    	var that = this;
      this.$wx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: function (res) {
					that.order= res.resultStr.indexOf(',')>-1?res.resultStr.split(',')[1]:res.resultStr; // 当needResult 为 1 时，扫码返回的结果
				}
			});
    },
    submit(){
      var that = this;
      if(this.selected===""){
        Toast("请选择快递公司")
        return
      }
      if(!this.order&&this.order === ""){
        Toast("请填写运单号")
        return
      }
      let params ={
        type:this.selected,
        postid:this.order
      }
      axios({
        url: "/ems/query",
        method: "get",
        params
      }).then(res=>{
        that.emsData = res.data
      });
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" lang="stylus">
#ems
  padding-top: 45px
  h1 
    font-size: 20px
  .mint-cell-wrapper
	  .mint-cell-title
	  	font-size:18px
	  	width:120px
	  	flex: none
	  .mint-cell-value
	    font-size: 18px;
	    flex: 1
	    border: 1px solid #ccc
	    .mint-field-other
	    	top: 0
		    right: 0
		    position: relative
		    transform: rotate(90deg)
		    color: #00
  #company
    width: 100%
    font-size: 18px
    border: none 

</style>
<style scope lang="stylus">
  .emsData
    li 
      margin :10px
      text-align :left
      .item
        font-size:14px
        color:red
      .context
        font-size:14px
</style>
